<template>
	<div class="home">
		<el-container style="width: 100%; height: 100%">
			<el-aside width="160px" style="height: 100%">
				<el-tabs v-model="activeName">
					<el-tab-pane label="企业微信" name="wechat">
						<el-menu :router="true" :default-active="$route.path" :unique-opened="true">
							<template v-for="(item, index) in menus">
								<template v-if="item.group.length !== 0">
									<el-submenu :index="index + ''" :key="index">
										<template slot="title">
											<i
												v-if="item.icon.includes('el-icon')"
												style="width: auto;margin: 0;"
												:class="`${item.icon} ${$route.path.includes(item.url) ? 'active-color' : ''}`"
											></i>
											<i v-else :class="`iconfont ${item.icon} ${$route.path.includes(item.url) ? 'active-color' : ''}`"></i>
											<span style="margin-left: 10px" :class="$route.path.includes(item.url) ? 'active-color' : ''">{{ item.title }}</span>
										</template>
										<el-menu-item
											:class="{ 'is-active': citem.url === $route.meta.role }"
											:data-path="citem.url"
											v-for="(citem, index) in item.group"
											:key="index"
											:index="citem.url"
										>
											{{ citem.title }}
										</el-menu-item>
									</el-submenu>
								</template>
								<template v-else>
									<el-menu-item
										:class="{ 'is-active': item.url === $route.meta.role }"
										:data-path="item.url"
										style="padding-left: 12px"
										:index="item.url"
										:key="index"
									>
										<i :class="`iconfont ${item.icon}`"></i>
										<span style="margin-left: 10px" slot="title">{{ item.title }}</span>
									</el-menu-item>
								</template>
							</template>
						</el-menu>
					</el-tab-pane>
					<el-tab-pane label="公众号" name="public"></el-tab-pane>
				</el-tabs>
			</el-aside>
			<el-container style="width: 100%; margin-left: 15px">
				<el-header style="height: 60px; font-size: 20px">
					<div class="header-logo">
						<LogoSvg />
						<span></span>
						<span>让生意更简单!</span>
					</div>
					<div class="header-btns">
						<el-button size="small" icon="el-icon-folder-opened" class="btn-white" @click="handleOpenMaterial">素材库</el-button>
						<el-button size="small" class="btn-white" icon="el-icon-refresh" style="margin: 0 40px 0 10px" @click="reqSyncConfig">同步企业微信</el-button>
						<i class="el-icon-setting" style="font-size: 24px; margin-right: 20px; cursor: pointer" @click="handleShowSetting"></i>
						<img src="../assets/images/question.png" width="20px" alt="" />
						<img style="margin: 0 20px" src="../assets/images/message.png" width="20px" alt="" />

						<el-dropdown @command="handleCommand" style="cursor: pointer">
							<span class="el-dropdown-link">
								<span class="phone">{{ phone }}</span>
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown"><el-dropdown-item command="out">退出</el-dropdown-item></el-dropdown-menu>
						</el-dropdown>
					</div>
				</el-header>
				<el-main><router-view /></el-main>
			</el-container>
		</el-container>
		<Material :materialVisible="materialVisible" @closepop="closepop" />
		<Setting :setVisible="setVisible" @handleCloseSet="handleCloseSet" />
	</div>
</template>

<script>
import { reqLogout, reqSyncConfig, reqDelConfig } from '@/api/index';
import Material from '@/components/Material.vue';
import Setting from '@/components/Setting.vue';
import { mapState } from 'vuex';
import { routes } from '@/router';
export default {
	name: 'Home',
	components: {
		Material,
		Setting
	},
	watch: {
		'$route.params.type': function(newVal, oldVal) {
			if (newVal == 'open') {
				this.materialVisible = true;
			}
		}
	},
	computed: {
		...mapState({
			menus: state => state.menus
		})
	},
	data() {
		return {
			routes,
			phone: localStorage.getItem('phone'),
			activeName: 'wechat',
			materialVisible: false,
			setVisible: false
		};
	},
	mounted() {
		this.$bus.$on('showConfig', () => {
			this.setVisible = true;
		});
	},
	methods: {
		// 登出
		async reqLogout() {
			let res = await reqLogout({
				user_id: localStorage.getItem('user_id')
			});
			if (res.code == 200) {
				localStorage.removeItem('token');
				localStorage.removeItem('user_id');
				this.$router.push('/login');
			}
		},
		// 项目初始化同步
		async reqSyncConfig() {
			this.$message({
				center: true,
				iconClass: 'el-icon-loading ',
				duration: 0,
				message: '正在进行企业微信同步，请耐心等待...'
			});
			let res = await reqSyncConfig({});
			if (res.code == 200) {
				this.$emit('load');
				this.$message.success('同步成功！');
			} else {
				this.reqDelConfig();
				this.$message.error('同步失败！');
			}
		},
		// 同步失败删除项目配置
		async reqDelConfig() {
			let res = await reqDelConfig({});
		},
		// 退出登录
		handleCommand(command) {
			switch (command) {
				case 'set':
					break;
				case 'out':
					this.reqLogout();
					break;
			}
		},
		// 打开素材库
		handleOpenMaterial() {
			this.materialVisible = true;
		},
		closepop() {
			this.materialVisible = false;
		},
		// 弹出系统配置
		handleShowSetting() {
			this.setVisible = true;
		},
		// 关闭系统设置
		handleCloseSet() {
			this.setVisible = false;
		}
	}
};
</script>

<style lang="less" scoped>
@active-color: #133ab3;
@calc: calc(100% - 30px);
@icon-size: 16px;
@color: #333;

.active-color {
	color: @active-color !important;
}

.home {
	width: @calc;
	height: @calc;
	padding: 15px;
	background-color: #f6f7fb;
	overflow: hidden;
	min-width: 1400px;

	.el-aside {
		position: relative;
		overflow: hidden;
		min-height: 100px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(47, 75, 168, 0.06);
		border-radius: 12px;

		.el-tabs {
			position: absolute;
			left: 0;
			top: 0;
			right: -17px;
			bottom: 0;
			overflow-x: hidden;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 17px;
			}

			/deep/.el-tabs__header {
				margin: 15px 0;
			}

			/deep/.el-tabs__content {
				margin-top: 15px;
			}

			/deep/.el-tabs__active-bar {
				height: 4px;
				background: @active-color;
				border-radius: 2px;
			}

			/deep/.el-tabs__nav {
				width: 100%;
			}

			/deep/.el-tabs__item {
				font-weight: bold;
				padding: 0 14px;
				width: 50%;
				text-align: justify;
				text-align-last: justify;
			}

			/deep/.el-tabs__item.is-active {
				color: @active-color;
			}

			/deep/.el-tabs__nav-wrap::after {
				background-color: #fff;
			}

			.el-menu {
				border-right: none;

				.el-icon-menu {
					font-size: 22px;
				}

				.el-submenu__title i,
				.el-menu-item i {
					font-size: @icon-size;
					color: @color;
				}

				/deep/.el-submenu__icon-arrow {
					font-weight: bold;
				}

				/deep/.el-menu-item.is-active {
					color: @active-color;
					background: #e5ebfb;
					border-right: 4px solid @active-color;
				}

				/deep/.el-menu-item.is-active i {
					color: @active-color;
				}

				/deep/.el-menu-item {
					width: 158px;
					padding: 0;
					height: 40px;
					line-height: 40px;
					margin: 10px 0;
				}

				.el-submenu {
					margin: 10px 0;

					/deep/.el-menu-item {
						min-width: 158px;
						padding-left: 40px !important;
					}
				}

				/deep/.el-submenu__title {
					padding-left: 12px !important;
					height: 40px;
					line-height: 40px;
				}
			}
		}
	}

	.el-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
		width: 100%;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(47, 75, 168, 0.06);
		border-radius: 12px;
		font-size: 20px;
		font-weight: bold;
	}

	.el-main {
		width: 100%;
		padding: 15px;
		margin-top: 15px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(47, 75, 168, 0.06);
		border-radius: 12px;
	}

	.phone {
		// margin-right: 20px;
		font-size: 14px;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: #333333;
	}

	.header-logo {
		display: flex;
		align-items: center;

		:nth-child(2) {
			width: 1px;
			height: 20px;
			background: #b9c5e9;
			margin: 0 20px;
		}

		:nth-child(3) {
			height: 20px;
			font-size: 14px;
			font-weight: 400;
			color: #999999;
		}
	}

	.header-btns {
		display: flex;
		align-items: center;
	}
}
</style>
